<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>故障内容后台管理</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<link rel="stylesheet" href="css/admin_myLayui.css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
			<div class="layui-logo"><img alt="" src="imgs/logo_02.png"></div>
			<!-- 头部区域（可配合layui已有的水平导航） -->
			<ul class="layui-nav layui-layout-left">
				<li class="layui-nav-item"><a href="">控制台</a></li>
				<li class="layui-nav-item"><a href="">商品管理</a></li>
				<li class="layui-nav-item"><a href="">用户</a></li>
				<li class="layui-nav-item"><a href="javascript:;">其它系统</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="">邮件管理</a>
						</dd>
						<dd>
							<a href="">消息管理</a>
						</dd>
						<dd>
							<a href="">授权管理</a>
						</dd>
					</dl></li>
			</ul>
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item"><a href="javascript:;"><%=request.getSession().getAttribute("username") %>
				</a>
				</li>
				<li class="layui-nav-item"><a href="fix.do?op=removesession">退了</a></li>
			</ul>
		</div>
		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul class="layui-nav layui-nav-tree" lay-filter="test">
					<li class="layui-nav-item "><a class=""
						href="javascript:;">用户信息</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="admin_users.jsp">用户列表</a>
							</dd>
							<dd>
								<a href="useradd.jsp">添加用户</a>
							</dd>
						</dl></li>
					<li class="layui-nav-item"><a href="javascript:;">公寓信息</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="admin_house.jsp">房屋列表</a>
							</dd>
							<dd>
								<a href="houseadd.jsp">添加房屋信息</a>
							</dd>
						</dl></li>
					<li class="layui-nav-item"><a href="javascript:;">缴纳信息</a>
					  <dl class="layui-nav-child">
							<dd>
								<a href="admin_prices.jsp">缴纳列表</a>
							</dd>
							<dd>
								<a href="priceadd.jsp">添加缴纳信息</a>
							</dd>
						</dl>
					</li>
					<li class="layui-nav-item"><a href="javascript:;">房源信息</a>
					  <dl class="layui-nav-child">
							<dd>
								<a href="admin_housing.jsp">房源列表</a>
							</dd>
							<dd>
								<a href="housingadd.jsp">添加房源信息</a>
							</dd>
						</dl>
					</li>
					<li class="layui-nav-item layui-this"><a href="fix.jsp">故障内容</a></li>
					<li class="layui-nav-item"><a href="admin_forum.jsp">社区评论</a></li>
				</ul>
			</div>
		</div>
		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div style="padding: 15px;">
			
			<!-- 该处为搜索框 -->
				<div class="demoTable">
					搜索ID：
					<div class="layui-inline">
						<input class="layui-input" name="id" id="demoReload"
							autocomplete="off">
					</div>
					<button class="layui-btn" data-type="reload">搜索</button>
				</div>
			
				<table class="layui-hide" id="test" lay-filter="test"></table>

				<script type="text/html" id="toolbarDemo">
                       <div class="layui-btn-container">
                             <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                             <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                             <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
                       </div>
                </script>

				<script type="text/html" id="barDemo">
                     <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </script>


				<script src="layui/layui.js" charset="utf-8"></script>
				<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

				<script>
					layui.use(['table','form'], function() {
						var table = layui.table;

						table.render({
							elem : '#test',
							url : 'fix.do',
							toolbar : '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
							,
							defaultToolbar : [ 'filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
								title : '提示',
								layEvent : 'LAYTABLE_TIPS',
								icon : 'layui-icon-tips'
							} ],
							title : '用户数据表',
							cols : [ [ {
								type : 'checkbox',
								fixed : 'left'
							}, {
								field : 'fixId',
								title : '编号',
								width : 80,
								fixed : 'left',
								unresize : true,
								sort : true
							}, {
								field : 'houseName',
								title : '公寓名称',
								width : 150,
								edit : 'text'
							}, {
								field : 'houseDoorNo',
								title : '房间号',
								width : 150,
								edit : 'text',
								templet : function(res) {
									return '<em>' + res.houseDoorNo + '</em>'
								}
							}, {
								field : 'fixContent',
								title : '故障内容',
								width : 314,
								edit : 'text',
								sort : true
							}, {
								field : 'fixState',
								title : '故障状态',
								width : 150
							},{ fixed: 'right', 
								title:'操作', 
								toolbar: '#barDemo', 
								width:150}
						     ] ],
							page : true,
							id : 'testReload'
						});
						
						//模糊查询开始
						var $ = layui.$, active = {
							reload : function() {
								var demoReload = $('#demoReload');

								//执行重载
								table.reload('testReload', {
									page : {
										curr : 1
									//重新从第 1 页开始
									},
									where : {
										"strLike" : demoReload
												.val()
									}
								}, 'data');
							}
						};
						$('.demoTable .layui-btn').on(
								'click',
								function() {
									var type = $(this).data(
											'type');
									active[type] ? active[type]
											.call(this) : '';
								});
						//结束

						//头工具栏事件
						table.on('toolbar(test)', function(obj) {
							var checkStatus = table.checkStatus(obj.config.id);
							switch (obj.event) {
							case 'getCheckData':
								var data = checkStatus.data;
								layer.alert(JSON.stringify(data));
								break;
							case 'getCheckLength':
								var data = checkStatus.data;
								layer.msg('选中了：' + data.length + ' 个');
								break;
							case 'isAll':
								layer.msg(checkStatus.isAll ? '全选' : '未全选');
								break;

							//自定义头工具栏右侧图标 - 提示
							case 'LAYTABLE_TIPS':
								layer.alert('这是工具栏右侧自定义的一个图标按钮');
								break;
							}
							;
						});
						
						//监听提交
						  layui.form.on('submit(demo1)', function(data){
//				 		    layer.alert(JSON.stringify(data.field), {
//				 		      title: '最终的提交信息'
//				 		    })
//				 		    return false;
							//layer.alert(JSON.stringify(data.field));
//				 			用ajax提交
							$.ajax({
								url:"fix.do?op=update",
								type:"post",
								contentType:"application/json",
								data:JSON.stringify(data.field),								
								success:function(msg1){
									layer.msg(msg1 == "true" ? "操作成功!" : "操作失败!", {
										icon: 1
									},function(){
										parent.layer.closeAll();
										location.reload();
									});
									
									
								}
							})
							
							
							return false;

						  });

						
						//监听行工具事件
						table.on('tool(test)', function(obj) {
							var data = obj.data;
							console.log(obj)
							if (obj.event === 'del') {
								layer.confirm('确定要删除[' + data.houseName + "&" + data.houseDoorNo + "]的故障反馈吗?", function(index) {
									$.post("fix.do", "op=del&id=" + data.fixId, function(data) {
										layer.msg(data == "true" ? "操作失败！" : "操作成功！", {
											icon : 1
										});
										obj.del();
										layer.close(index);
									})
								});
							} else if (obj.event === 'edit') {
// 								layer.prompt({
// 									formType : 2,
// 									value : data.email
// 								}, function(value, index) {
// 									obj.update({
// 										email : value
// 									});
// 									layer.close(index);
// 								});
								$("#fixId").val(data.fixId);
								$("#houseName").val(data.houseName);
								$("#houseDoorNo").val(data.houseDoorNo);
								$("#fixContent").val(data.fixContent);
								if(data.fixState == '0'){
									$("input[name='fixState'][value='0']").prop("checked",true);
								}else{
									$("input[name='fixState'][value='1']").prop("checked",true);
								}
								layui.form.render();
								layer.open({
									  type: 1,
									  title:'修改信息',
									  content: $("#fixDiv1"), //数组第二项即吸附元素选择器或者DOM
									  area : [ '700px', '450px' ]
									});
							}
						});
					});
				</script>


			</div>
		</div>
		
		<div id="fixDiv1" style="display:none;">
		
		<form class="layui-form" lay-filter="example">
			<div class="layui-form-item">
				<label class="layui-form-label">ID</label>
				<div class="layui-input-block">
					<input type="text" id="fixId" name="fixId" lay-verify="title"
						autocomplete="off" placeholder="" readonly="readonly"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">公寓名称</label>
				<div class="layui-input-block">
					<input type="text" id="houseName" name="houseName"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">房间号</label>
				<div class="layui-input-block">
					<input type="text" id="houseDoorNo" name="houseDoorNo"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">故障内容</label>
				<div class="layui-input-block">
						<textarea name="fixContent" id="fixContent""
						autocomplete="off" class="layui-input" style="resize:none;height:100px"></textarea>
				</div>
			</div>

			<div class="layui-form-item" pane="">
				<label class="layui-form-label">故障状态</label>
				<div class="layui-input-block">
					<input type="radio" id="fixState" name="fixState" value="0" title="禁用" checked="">
					<input type="radio" id="fixState" name="fixState" value="1" title="启用"> 
				</div>
			</div>
			
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="submit" class="layui-btn" lay-submit=""
						lay-filter="demo1">立即提交</button>
				</div>
			</div>
		</form>
		</div>

		<div class="layui-footer">
			<!-- 底部固定区域 -->
			© layui.com - 底部固定区域
		</div>
	</div>
	<script>
		//JavaScript代码区域
		layui.use('element', function() {
			var element = layui.element;

		});
	</script>
	
</body>
</html>
